<!DOCTYPE html>
<html mip>

<head>
    {{ render(controller('AppBundle\\Controller\\Index\\IndexController::webconfigAction')) }}
    <title> {{page.name}} - {{ app.session.get('webconfig').name }}</title>
    <meta name="description" content="{{ app.session.get('webconfig').description }}">
    <meta name="keywords" content="{{ app.session.get('webconfig').keywords }}">
    <link rel="icon" type="image/png" href="http://www.pteacademy.cn/uploads/web/favicon.ico">
    <link rel="shortcut icon" type="image/png" href="http://www.pteacademy.cn/uploads/web/favicon.ico">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://www.kewo.com/Public/Index/css/kewo_reset.css">
    <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
    <link rel="canonical" href="https://www.mipengine.org.com">

    <style mip-custom>
        body {
            background: #fff;
        }
        
        .header {
            width: 100%;
            height: 80px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 5px 15px 0px rgba(19, 118, 225, 0.1);
        }
        
        .logo {
            width: 38.4%;
            float: left;
            margin-top: 25px;
            margin-left: 24px;
        }
        
        .content {
            overflow: hidden;
            padding-bottom: 44px;
        }
        
        .detail-tit {
            width: 330px;
            height: 56px;
            font-size: 18px;
            font-family: PingFangSC-Regular;
            color: rgba(0, 0, 0, 1);
            line-height: 28px;
            text-overflow: -o-ellipsis-lastline;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-top: 29px;
            margin-left: 6.667%;
            font-weight: bold;
        }
        
        .time_ymdt {
            margin-left: 6.667%;
            font-size: 14px;
            font-family: PingFangSC-Regular;
            color: rgba(155, 155, 155, 1);
            line-height: 20px;
            margin-top: 15px;
        }
        
        .con_tit {
            font-size: 20px;
            font-family: PingFangSC-Semibold;
            color: rgba(74, 74, 74, 1);
            line-height: 28px;
            margin-top: 20px;
            margin-left: 5.333%;
            font-weight: bold;
        }
        
        .list {
            overflow: hidden;
            display: block
        }
        
        .mt20 {
            margin-top: 20px;
        }
        
        .mt22 {
            margin-top: 22px;
        }
        
        .mt25 {
            margin-top: 25px;
        }
        
        .mt32 {
            margin-top: 32px;
        }
        
        .mt37 {
            margin-top: 37px;
        }
        
        .list_pic {
            width: 26.667%;
            border-radius: 8px;
            margin-left: 5.333%;
            margin-top: 3px;
            float: left;
        }
        
        .list_det {
            float: left;
            margin-left: 5.333%;
            width: 56%;
        }
        
        .det_tit {
            font-size: 16px;
            font-family: PingFangSC-Regular;
            color: rgba(74, 74, 74, 1);
            line-height: 24px;
            text-overflow: -o-ellipsis-lastline;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 5px;
        }
        
        .yd,
        .det_time,
        .many {
            font-size: 14px;
            font-family: PingFangSC-Regular;
            color: rgba(204, 204, 204, 1);
            line-height: 26px;
        }
        
        .yd {
            margin-left: 15%;
        }
        
        .det_pic {
            width: 88%;
            margin: 15px auto 0;
        }
        
        #det_cont {
            width: 88%;
            margin: 15px auto 0;
            font-size: 14px;
            font-family: PingFangSC-Regular;
            color: rgba(74, 74, 74, 1);
            line-height: 26px;
            overflow: hidden;
            position: relative;
        }
        
        .all {
            width: 32%;
            height: 40px;
            background: rgba(19, 118, 225, 1);
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            font-family: PingFangSC-Regular;
            color: rgba(255, 255, 255, 1);
            margin-top: 15px;
            margin-left: 33.6%;
        }
        
        .ggpic {
            width: 100%;
            margin: 15px auto 32px;
            border-radius: 11px;
        }
        
        .load {
            font-size: 12px;
            font-family: PingFangSC-Regular;
            color: rgba(155, 155, 155, 1);
            line-height: 17px;
            margin: 34px auto 0;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="header">
        <mip-img layout="responsive" width="144" height="32" src="/index/img/logo.svg" class="logo"></mip-img>
    </div>
    <div class="content">
        <h1 class="detail-tit">{{page.name}}</h1>
        <div class="time_ymdt">
            <span class="ymd">{{ page.createdAt|date('Y-m-d')}}</span>
            <span class="t">{{ page.createdAt|date('H:i')}}</span>
        </div>
        <mip-showmore id="det_cont" bottomshadow="1" bufferheight="40" maxheight='490' animatetime='.3'>
            {% autoescape false %}

                {{ page.content }}
            
            {% endautoescape %}
        </mip-showmore>
        <div on="tap:det_cont.toggle" data-closetext="收起" class="all">查看全文</div>
        <a data-type="mip" href="https://item.taobao.com/item.htm?spm=a230r.1.14.92.202023f2HjqNww&id=564964934664&ns=1&abbucket=14#detail" class="list mt37">
            <mip-img layout="responsive" width="330" height="149" src="/index/img/m_banner.png" class="ggpic"></mip-img>
        </a>
        <div class="con_tit">相关资讯</div>
        {% for relation in relations %}   
             <a data-type="mip" href="{{path('showNews',{id:relation.id})}}" class="list mt20">
                <mip-img layout="responsive" width="110" height="75" src="/index/img/pic1.png" class="list_pic"></mip-img>
                <div class="list_det">
                    <div class="det_tit">{{relation.name}}</div>
                    <span class="det_time">{{ relation.createdAt|date('Y.m.d')}}</span>
                    <span class="yd">阅读</span>
                    <span class="many">{{relation.viewsnum}}</span>
                </div>
            </a>
        {% endfor %}
        
        <!-- 无限加载 -->
        {# <mip-infinitescroll data-src="{{url('newsMore')}}" template="myTemplate">
            <script type="application/json">
            {
                "rn": "Infinity",
                "pn": 1, 
                "prn": 1,
                "pnName": "pn", 
                "bufferHeightPx": 40,
                "timeout": 5000, 
                "loadingHtml": "剩下的信息正在玩命加载中",
                "loadFailHtml": "数据加载失败啦",
                "loadOverHtml": "没有数据了哦"
            }
            </script>
            {% verbatim %}
            <template type="mip-mustache" id="myTemplate">
                <a data-type="mip" href="" class="list mt32">
                    <mip-img layout="responsive" width="100" height="75" src="" class="list_pic"></mip-img>
                    <div class="list_det">
                        <div class="det_tit">{{name}}</div>
                        <span class="det_time">2018.07.09</span>
                        <span class="yd">阅读</span>
                        <span class="many">3948</span>
                    </div>
                </a>
            </template>
            {% endverbatim %}
            <div class="mip-infinitescroll-results"></div>
            <div class="bg">
                <div class="mip-infinitescroll-loading load"></div>
            </div>
        </mip-infinitescroll> #}
        
    </div>
    <script src="https://c.mipcdn.com/static/v1/mip.js"></script>
    <script src="https://c.mipcdn.com/static/v1/mip-showmore/mip-showmore.js
    "></script>
    <script src="https://c.mipcdn.com/static/v1/mip-infinitescroll/mip-infinitescroll.js
    "></script>
    <script src="https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"></script>
    <script>
    (function (m, ei, q, i, a, j, s) {
        m[i] = m[i] || function () {
            (m[i].a = m[i].a || []).push(arguments)
        };
        j = ei.createElement(q),
            s = ei.getElementsByTagName(q)[0];
        j.async = true;
        j.charset = 'UTF-8';
        j.src = 'https://static.meiqia.com/dist/meiqia.js?_=t';
        s.parentNode.insertBefore(j, s);
    })(window, document, 'script', '_MEIQIA');
    _MEIQIA('entId', 107666);
    </script>
</body>

</html>